<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon"
	href="assets/img/favicon.ico">

<!-- CSS 
    ========================= -->
<!--bootstrap min css-->
<link rel="stylesheet"
	href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
<!--owl carousel min css-->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!--slick min css-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--magnific popup min css-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--font awesome css-->
<link rel="stylesheet"
	href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
<!--ionicons css-->
<link rel="stylesheet" href="assets/css/ionicons.min.css">
<!--linearicons css-->
<link rel="stylesheet" href="assets/css/linearicons.css">
<!--animate css-->
<link rel="stylesheet" href="assets/css/animate.css">
<!--jquery ui min css-->
<link rel="stylesheet" href="assets/css/jquery-ui.min.css">
<!--slinky menu css-->
<link rel="stylesheet" href="assets/css/slinky.menu.css">
<!--plugins css-->
<link rel="stylesheet" href="assets/css/plugins.css">

<!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">

<!--modernizr min js here-->
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>

</head>

<body>

	<jsp:include page="head.jsp"></jsp:include>

	<!--breadcrumbs area start-->
	<div class="breadcrumbs_area">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="breadcrumb_content">
						<h3>购物车</h3>
						<ul>
							<li><a href="index.html">主页</a></li>
							<li>购物车</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--breadcrumbs area end-->

	<!--shopping cart area start -->
	<div class="shopping_cart_area mt-70">
		<div class="container">
			<form action="OrdersServlet?op=cart" method="post">
				<div class="row">
					<div class="col-12">
						<div class="table_desc">
							<div class="cart_page table-responsive">
								<table>
									<thead>
										<tr>
											<th class="product_remove">操作</th>
											<th class="product_thumb">图片</th>
											<th class="product_name">菜品</th>
											<th class="product-price">单价</th>
											<th class="product_quantity">数量</th>
											<th class="product_total">总价</th>
										</tr>
									</thead>
									<tbody>
										
										
										<c:if test="${cart!=null}">
											<c:forEach items="${cart.cartItems}" var="list">
												<tr>
													
													<td class="product_remove"><a href="OrderdetailServlet?op=deleteCartByKey&key=${list.key}"><i
															class="fa fa-trash-o delete"></i></a></td>
													<td class="product_thumb"><a href="#"><img
															src="${list.value.foods.img }" alt=""></a></td>
													<td class="product_name"><a href="#">${list.value.foods.foodsname}</a></td>
													<td class="product-price">${list.value.foods.price }</td>
													<td class="product_quantity"><label></label>
														<a href="OrderdetailServlet?op=update&sign=drop&key=${list.key}">-</a>
														<input class="updateNum" value="${list.value.count}" type="text" readonly="readonly" style="text-align: center" name= "count" >
														<a href="OrderdetailServlet?op=update&sign=up&key=${list.key}">+</a>
													</td>
													<td class="product_total">${list.value.total}</td>


												</tr>

											</c:forEach>
										</c:if>
									</tbody>
								</table>
							</div>
							<div class="cart_submit">
								<button type="submit">提交订单</button>
							</div>
						</div>
					</div>
				</div>
				<!--coupon code area start-->
				<div class="coupon_area">
					<div class="row">

						<div class="col-lg-12 col-md-12">
							<div class="coupon_code right">
								<h3>结算</h3>
								<div class="coupon_inner">
									
									

									<div class="cart_subtotal">
										<p>总计</p>
										<p class="cart_amount">${cart.total}</p>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--coupon code area end-->
			</form>
		</div>
	</div>
	<!--购物车 部分 结束 -->
	<!--footer area start-->

	<jsp:include page="footer.jsp"></jsp:include>
	<!--footer area end-->
<script>
$(".updateNum").click(function(){
      	 //得到这行的第一个td中的foodsid的值
      	 var count = $(this).parents("tr").find("td").eq(4).val();
      	
  	    // ajax请求修改操作
  	    $.ajax({
  	    	//参数
  	    	url: "OrderdetailServlet",
  	    	type: "post",
  	    	data:{
  	    		count: $("input[name='count']").val(),
  	    		op: "update"
  	    	},
  	    	success: function(res){
  	    		//判断返回值的结果，根据结果做提示以及后续的页面刷新操作
  	    		if(res.msg == "true")

  	    			location.href="OrdersServlet?op=selectByPage&page="+${pData.page}+"&pageSize="+${pData.pageSize}+"&keywords="+$("#keywords").val();	    				  
	    					    			
  	    			}
  	    		else{
  	    			
  	    			layer.msg('删除失败!搞错了，再来', {
  	    				icon: 1,
  	    			    time: 2000, //2s后自动关闭
  	    			    btn: ['确定']
  	    			  });
  	    		}	
  	    	},
  	    	dataType: "json"	
  	    });
       });
</script>
	
</body>
</html>